<template>
  <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
  <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
  <el-dialog title="岗位统计" :visible.sync="detailVisible" width="30%">
<!--    <chart1 class="chart" :option="option" v-if="detailVisible"/>-->
    <div><chart4 :width='400' :height='250' :leftText="chart4Text" :digitalData="digitalData"
                 style="padding-top: 20px;"></chart4></div>
  </el-dialog>
</template>

<script>
  import chart4 from '@/components/echarts/chart4'
  export default {
    components: {
      chart4,
    },
    name: "dialogComponentCount",
    data(){
      return{
        detailVisible:false,
        renderList:[],
        chart4Text:[],
      }
    },

    methods:{
      //3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
      init(countData) {
        this.detailVisible = true;
        this.renderList=JSON.parse(countData);
        JSON.parse(countData).forEach(item=>{
          this.chart4Text.push(item.name)
        })
        this.digitalData=this.renderList;

      },
    },
    // computed: {
    //   option () {
    //
    //
    //   }
  }
</script>

<style lang="css" scoped>
  .chart
  {
    height: 400px;
    /* display: none; */
    left: 20%;
    width: 300px;
  }
</style>
